<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>position</title>

<style >

.title {
font-size: 30px;
background: darkgray;
}

h1 {
 color: blue;
}




div {
width: 200px;
height: 200px;

}

/*------相对定位-----*/
.div1 {
background: red;
}

.div2 {
background: green;
position: relative;
left: 200px;
top: 200px;

/*相对定位
position需要配合偏移使用,不然没效
position不会让元素脱离文档流
相对定位(relative)会保留原位置,后续的元素会在元素原来的位置基础上继续往下渲染
提升层级(在同一父级下z-index)
*/


}

.div3 {
background: blue;
}


/*---绝对定位----*/
.div4 {
  background: red;
}
.div5 {
  background: blue;
position: absolute;
top: 400px;
left: 200px;
}
.div6 {
background: green;
position: absolute;
top: 400px;
}

/*绝对定位
1.元素完全脱离文档流
2.是inline元素支持宽高
3.block元素撑开宽度
4.层级提升
5.如果父级没有使用position(一般使用relative),则子级相对于document定位(通常要清除body的margin,防止干扰布局)
*/


.continer2{
  width: 600px;
  height: 600px;
  position: relative;
  background: black;
  margin-left: 10px;

}


/*---固定定位----*/

/*
特性与绝对定位差不多,区别是坐标系始终针对文档进行定位;(IE6不支持)
*/

.fixed {
width: 80px;
height: 80px;
position: fixed;
right: 10px;
bottom: 10px;
background: red;
}


/*
posistion: static;
posistion: inheriter;(继承,不兼容)

*/


</style>

  </head>

  <body>

<!--  -->


<h1>相对定位</h1>

<div class="div1 "></div>
<div class="div2 "></div>
<div class="div3 "></div>


<hr>




<h1>绝对定位</h1>
<div class="continer2">
  <div class="div4">444444</div>
  <div class="div5">555555</div>
  <div class="div6">666666</div>

</div>
<hr>




<h1>固定定位</h1>

<div class="fixed">
返回顶部
</div>



<hr>








</body>
</html>
